<template>
  <div class="parent-card">
    <el-image-viewer hide-on-click-modal @close="() => { showImage = false }" v-if="showImage"
      :url-list="[previewImage]" />
    <Modal v-model:show-modal="showModal">
      <video width="800" height="360" controls autoplay loop>
        <source :src="videoUrl" type="video/mp4" />
      </video>
    </Modal>
    <div class="left" v-show="certificationList.length">
      <div class="imgs" v-infinite-scroll="load" style="overflow:auto" :infinite-scroll-distance="10"
        :infinite-scroll-immediate="false">
        <div v-for="item, index in certificationList" class="img-card" :key="item.book_id"
          @click=" loadInfo(item.user_id, index, item.book_id)">
          <div class="tag tag-review" v-if="item.is_second == 2">
            <div class="text">REVIEW</div>
          </div>
          <div class="left-content">
            <el-image :src="getImg(item.avatar)" class="avatar" :fit="fit" />
            <div class="host-id">
              {{ item.nickname }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-show="certification.id" :infinite-scroll-distance="10" :infinite-scroll-immediate="false">
      <div class="content">
        <div class="top">
          <div>
            <div class="host-id">
              ID:{{ certification.id }}
            </div>
          </div>
          <el-button class="reject-all" @click="rejectHost" v-show="certification.can_reject_all">Reject All</el-button>
        </div>
        <div class="center">

          <div class="story-card" :style="{ 'background-image': `url('${certification.edu_avatar}')` }"
            @click="preview(certification.edu_avatar)">

          </div>
          <div class="story-card" :style="{ 'background-image': `url('${getImg(certification.avatar.content)}')` }"
            @click="preview(certification.avatar.content)">
            <div class="btns" v-show="certification.avatar.status == 1">
              <el-button class="reject"
                @click.stop="reject(certification.avatar.id, $event, certification.avatar)">Reject</el-button>
              <el-button class="accept"
                @click.stop="accept(certification.avatar.id, $event, certification.avatar)">Accept</el-button>
            </div>
          </div>
          <div class="info">
            <table>
              <tr>
                <td>School</td>
                <td>{{ certification.school }}</td>
                <td>Sex</td>
                <td>{{ certification.sex }}</td>
              </tr>
              <tr>
                <td>Birthday</td>
                <td>{{ certification.birthday }} / Age: {{ certification.age }}</td>
                <td>Address</td>
                <td>
                  {{ certification.address }}
                </td>
              </tr>
              <tr>
                <td>Location</td>
                <td>{{ certification.location }}</td>
                <td>Register Time</td>
                <td>
                  {{ certification.register }}
                </td>
              </tr>
              <tr>
                <td>IDCard</td>
                <td colspan="3">
                  {{ certification.id_card }}
                </td>
              </tr>
              <tr>
                <td>Nickname</td>
                <td colspan="3">
                  <div class="flex">
                    <div class="about-me" v-show="certification.nickname.status == 1" >
                      {{ certification.nickname.content }}
                    </div>
                     <div  v-show="certification.nickname.status !=1" style="width:100%" >
                        {{ certification.nickname.content }}
                      </div>
                    <div class="opts" v-show="certification.nickname.status == 1">
                      <el-button class="reject"
                        @click.stop="reject(certification.nickname.id, $event, certification.nickname)">Reject</el-button>
                      <el-button class="accept"
                        @click.stop="accept(certification.nickname.id, $event, certification.nickname)">Accept</el-button>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="tab">
          <div class="title">About Me</div>
          <div v-show="certification.self_intro.status == 1">
            <el-button class="reject"
              @click.stop="reject(certification.self_intro.id, $event, certification.self_intro)">Reject</el-button>
            <el-button class="accept"
              @click.stop="accept(certification.self_intro.id, $event, certification.self_intro)">Accept</el-button>
          </div>
        </div>
        <div class="row-content">
          {{ certification.self_intro.content }}
        </div>
        <div class="tab">
          <div class="title">Love Intro</div>
          <div v-show="certification.love_intro.status == 1">
            <el-button class="reject"
              @click.stop="reject(certification.love_intro.id, $event, certification.love_intro)">Reject</el-button>
            <el-button class="accept"
              @click.stop="accept(certification.love_intro.id, $event, certification.love_intro)">Accept</el-button>
          </div>
        </div>
        <div class="row-content"> {{ certification.love_intro.content }}</div>
        <div class="tab">
          <div class="title tags">Tags</div>
          <div v-show="certification.tags.status == 1">
            <el-button class="reject"
              @click.stop="reject(certification.tags.id, $event, certification.tags)">Reject</el-button>
            <el-button class="accept"
              @click.stop="accept(certification.tags.id, $event, certification.tags)">Accept</el-button>
          </div>
        </div>
        <div class="row-content" v-if="certification.tags">
          <el-tag type="primary" size="large" class="tag" v-for="item in  certification.tags.content.split(',') ">{{ item
          }}</el-tag>
        </div>
        <div class="title">Album</div>
        <div class="album">
          <div class="album-cards">
            <div class="album-card" :style="{ 'background-image': `url('${getImg(item.content)}')` }"
              v-for="item in certification.imgs" :key="item.id" @click="preview(getImg(item.content))">
              <div class="btns" v-if="item.status == 1">
                <el-button class="reject" @click.stop="reject(item.id, $event, item)">Reject</el-button>
                <el-button class="accept" @click.stop="accept(item.id, $event, item)">Accept</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template class="empty-tip" v-show="!certificationList.length">
      <div>No any data</div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import useSettingStore from '@/vendors/store/setting'
import { getImg } from '@/utils/utils';
const playImage = new URL(`../images/play_icon.png`, import.meta.url).href
const image = new URL(`../images/video.png`, import.meta.url).href
import { GetCertification } from '@/vendors/certification/certification'
import { ElImageViewer } from 'element-plus';
import Modal from '@/components/common/Modal.vue'
import { ElLoading } from 'element-plus'
import useSetting from '@/vendors/store/setting'
const previewImage = ref('')
const videoUrl = ref('')
const showImage = ref(false)
const showModal = ref(false)
const loadIndex = ref(-1)
type Field = {
  status: number
}
const {
  updateAudit,
  list,
  rejectAll,
  // getCaVideos,
  // getCaAlbum,
  getCaInfo,
  certification,
  certificationList,
  certificationTotal,
  albumList,
  videosList,
  // albumTotal,
  // videoTotal,
  albumPage,
  videosPage,
  workSheetId,
  certificationPage,
  certificationSize
} = GetCertification()

const fit = ref('cover')
list(() => {
  //初始化加载第一个
  certificationList.value.length > 0 && loadInfo(certificationList.value[0].user_id, 0, certificationList.value[0].book_id)
})
const load = () => {
  if (certificationList.value.length == certificationTotal.value) return
  list()
}

// const loadAlbumAndStory = () => {
//   if (albumList.value.length == albumTotal.value && videosList.value.length == videoTotal.value) return
//   getCaVideos(certification.value.user_id)
//   getCaAlbum(certification.value.user_id)
// }


const loadingService = {
  lock: true,
  text: 'Loading',
  background: 'rgba(0, 0, 0, 0.7)',
}

const reject = (id: number, event: any, field: Field) => {
  console.log('rejected')
  certification.value.can_reject_all = false
  const loading = ElLoading.service(loadingService)
  updateAudit(id, 3, certification.value.id, (count: number) => {
    field.status = 3
    // if (!count) {
    //   // 减少数量
    //   const setting = useSetting()
    //   setting.setUserAlbumVideoCount(setting.count[0].num - 1)
    //   // 模块已处理完 数据减少 加载新数据
    //   certificationList.value.splice(loadIndex.value, 1)
    //   certificationList.value.length > 0 && loadInfo(certificationList.value[0].user_id, 0, workSheetId.value)
    // }
    loading.close()
  })
}
const accept = (id: number, event: any, field: Field) => {
  console.log('accept')
  certification.value.can_reject_all = false
  const loading = ElLoading.service(loadingService)
  updateAudit(id, 2, certification.value.id, (count: number) => {
    field.status = 2
    // if (!count) {
    //   // 减少数量
    //   const setting = useSetting()
    //   setting.setUserAlbumVideoCount(setting.count[0].num - 1)
    //   // 模块已处理完 数据减少 加载新数据
    //   certificationList.value.splice(loadIndex.value, 1)
    //   certificationList.value.length > 0 && loadInfo(certificationList.value[0].user_id, 0, workSheetId.value)
    // }
    loading.close()
  })
}


const loadInfo = (user_id: number, index: number, work_sheet_id: number) => {
  const loading = ElLoading.service(loadingService)
  loadIndex.value = index
  certification.value.id = user_id
  workSheetId.value = work_sheet_id
  albumList.value.splice(0, albumList.value.length)
  videosList.value.splice(0, videosList.value.length)
  albumPage.value = 1
  videosPage.value = 1
  getCaInfo(user_id, () => {
    loading.close()
  })
  // getCaVideos(user_id)
  // getCaAlbum(user_id)
}
const preview = (img: string) => {
  showImage.value = true
  previewImage.value = img
}

const rejectHost = () => {
  const loading = ElLoading.service(loadingService)
  rejectAll(certification.value.id, workSheetId.value, (success: number) => {
    // 模块已处理完 数据减少 加载新数据
    certificationList.value.splice(loadIndex.value, 1)
    certificationList.value.length > 0 && loadInfo(certificationList.value[0].user_id, 0, workSheetId.value)
    loading.close()
  })
}

const setting = useSettingStore()
watch(() => setting.refreshCount, () => {
  if (setting.refreshCount) {
    // 需要刷新当前页
    const len = certificationList.value.length
    certificationTotal.value = 0
    const flag = len != 0 && len % certificationSize.value == 0  // 列表是整10倍数
    let index = 0
    let count = 0
    console.log(flag)
    if (!flag) {
      // 非整10倍数
      certificationPage.value -= 1
      index = Math.floor(len / certificationSize.value) * certificationSize.value
      count = len - index
    }
    list(() => {
      setting.setRefreshCount(!setting.refreshCount)
      count && certificationList.value.splice(index, count)
      certificationList.value.length > 0 && loadInfo(certificationList.value[0].user_id, 0, certificationList.value[0].book_id)
    })
  }
})
</script>
<style scoped lang="scss">
.parent-card {
  border-radius: 16px;
  background: white;
  display: flex;
  box-shadow: -3px 0 4px 1px #0000001A, 3px 0 4px 1px #0000001A;

  .left {
    height: calc(100vh - 330px);
    width: 304px;
    display: flex;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;

    .imgs {
      margin: 0 auto;

      .img-card {
        width: 240px;
        height: 240px;
        margin-bottom: 24px;
        margin-right: 16px;
        border-radius: 16px;
        background: #FFF6F9;
        text-align: center;
        position: relative;
        cursor: pointer;

        .left-content {
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          bottom: 0;
          z-index: 100;
        }

        .tag-review {
          background: rgba(250, 74, 130, 1);
        }

        .tag-review:before,
        .tag-return::before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          left: 2px;
          top: 2px;
          border-bottom: 48px solid #FFF6F9;
          border-left: 120px solid transparent;
        }

        .tag-return {
          background: black;
        }

        .tag {
          width: 120px;
          height: 48px;
          color: white;
          font-size: 12px;
          border-top-left-radius: 16px;

          .text {
            transform: rotate(-20deg);
            position: absolute;
            left: 3px;
            top: 12px;
            font-size: 700px;
            font-size: 12px;
          }
        }



        .avatar {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          margin-top: 24px;
        }


        .host-id {
          font-family: Montserrat;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0em;
          margin-bottom: 30px;
        }
      }

    }
  }

  .right {
    width: calc(100vw - 304px);
    max-height: calc(100vh - 330px);
    overflow-y: scroll;

    .content {
      margin: 24px 48px;

      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        height: 70px;
        border-bottom: 1px solid rgba(39, 60, 98, 0.2);

        .country {
          text-align: left;
          margin-top: 0;
        }

        .reject-all {
          font-family: Montserrat;
          font-size: 18px;
          font-weight: 700;
          letter-spacing: 0em;
          width: 160px;
          height: 48px;
          top: 60px;
          border-radius: 12px;
          background: rgba(250, 74, 130, 1);
          color: white;
          margin-top: 4px;
        }
      }
    }
  }
}

.left,
.right {
  margin: 24px 0;
  // max-height: 2514px;

}

.country {
  margin: 14px 0 10px 0;

  .flag {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 8px;
  }

  .text {
    font-family: Montserrat;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0em;
  }
}

.center {
  height: 400px;
  margin: 23px 0 48px 0;
  display: flex;
}

.album,
.story {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.05);
  padding: 24px 46px;
}

.story-card:nth-child(4n),
.album-card:nth-child(4n) {
  margin-right: 0;
}

.album-card:nth-last-child(-n+4),
.story-card:nth-last-child(-n+4) {
  margin-bottom: 0;
}

.story-card,
.album-card {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 400px;
  border-radius: 16px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 48px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.album-cards {
  display: flex;
  flex-wrap: wrap;
}


.title {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 22px;
}

.story-title {
  margin-top: 48px;
}

td:nth-child(2n-1) {
  width: 200px;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0em;
  background: #dfdede;
}

td {
  height: 77px;
  text-align: center;
}

td:nth-child(2n) {
  background: #E6E6E6;
  width: 250px;
  font-size: 18px;
}

.color-red {
  color: rgba(255, 0, 0, 1);
}

.btns {
  width: 276px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.reject,
.accept {
  border: 0;
  font-weight: 700;
  font-size: 18px;
  width: 130px;
  height: 48px;
  border-radius: 12px;
  cursor: pointer;
}

.reject {
  color: rgba(250, 74, 130, 1);
}

.accept {
  color: white;
  background: rgba(0, 132, 255, 1);

}

.info {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
}

.weight600 {
  font-weight: 600;
}

.flex {
  display: flex;
  justify-content: space-between;

  .about-me {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .text {
    text-align: center;
    width: 550px;
    line-height: 80px;
  }

  .text-2 {
    width: 300px;
    word-break: break-all;
    white-space: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 26px;
  }

  .opts {
    width: 380px;
    line-height: 80px;
  }
}


.tab {
  display: flex;

  .title {
    line-height: 48px;
    margin-right: 30px;
  }

  .tags {
    margin-right: 98px
  }

  .reject {
    border: 1px solid #E6E6E6
  }
}

.row-content {
  text-align: left;
  padding: 20px;
  font-size: 25px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.05);
}

.tag {
  margin-right: 10px
}
</style>